<script>
  function EventCtrl($scope) {
    $scope.blurCallback = function (evt) {
      alert('Goodbye. Input content is: ' + evt.target.value);
    };
  }
</script>
<section id="event" ng-controller="EventCtrl">
  <div class="page-header">
    <h1>Event Binder</h1>
  </div>
  <div class="row">
    <div class="span6">
      <h3>What?</h3>

      <p>Bind a callback to any event not natively supported by Angular.</p>

      <p class="well"><input value="Focus and then Blur this input" ui-event="{ blur : 'blurCallback($event)' } "></p>

      <h3>Why?</h3>

      <p>For Blurs, Focus, Double-Clicks or any other event you may choose that isn't built-in.</p>
    </div>
    <div class="span6">
      <h3>How?</h3>

      <p>You can pass multiple events as an object, along with the jQuery event itself:</p>
<pre class="prettyprint">
&lt;input ui-event=&quot;{ blur : 'blurCallback($event)' }&quot;&gt;

&lt;script&gt;
$scope.blurCallback = function(evt) {
alert(&#x27;Goodbye. Input content is: &#x27; + evt.target.value);
};
&lt;/script&gt;
</pre>
    </div>
  </div>
</section>
